Unit Tests

Accedo Build Web is using the Jest framework for unit/integration testing. This is a framework which is easy to configure and also plays nicely with Babel and webpack.

Jest will automatically pick up your tests if they are located in a folder named __tests__ or have the extension of *.spec.js or *.test.js.

Running your Tests

Your package.json should contain the scripts necessary for running your test suite.

Typically you should have your 'test' script configured to run Jest:

// package.json
{
  ...
  "scripts": {
    "test": "jest --watch"
    "test:once": "jest"
  }
}

Then you can run these accordingly:

# Run the test suite in watch mode
$ npm test

# Run the test suite only once (used for CI or git hooks)
$ nmp run test:once

Configurations

Jest configurations can be defined with a .jestrc file or directly in your package.json file

We recommend to use the preset @accedo/vdkweb-jest-preset to get the conventional configurations used for Build Web components. If you for some reason want to deviate from the defaults in this preset, you can easily extend it with local configurations.

// package.json
{
  ...
  "jest": {
    "preset": "@accedo/vdkweb-jest-preset",
    ... // Add your own configurations here
  }
}

The preset configurations will tell Jest to only look in the src folder for tests. It will also enable coverage collection from all .js files in the src folder (excluding tests and Storybook stories) and a few different coverage reporters, such as json, lcov (used for Sonar), cobertura and text-summary.

Coverage

Configure your package.json to allow for coverage information to be collected.

{
  ...
  "jest": {
    ...
    "collectCoverage": true,
  }
}

It automatically generates both JSON and HTML reports which by default will end up in the folder coverage.

Note: This will be enabled by default if you're using @accedo/vdkweb-jest-preset.

Mocking non-JS Modules

For Jest to play well with webpack and be able to handle modules that aren't necessarily JS modules (e.g. images, css files, fonts, etc) you will be required to mock the responses of these non-JS modules.

The contents of these files usually doesn't matter for the tests and we can typically just return an empty object in their place.

Use the moduleNameMapper configuration to mock non-JavaScript files in your dependency tree.

{
  ...
  "jest": {
    ...
    "moduleNameMapper": {
      "^.+\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":
        "<rootDir>/src/__tests__/fileMock.js"
    }
  }
}

fileMock.js will then simply returning an empty object.

// fileMock.js
module.exports = {};

Important: JSDom when using React

To improve tests performance, the app defaults to use the node test environment (configured in Jest config). This means that global.document or global.window will not be defined under these tests. This is required by React tests, so whenever you need these variables, you can add this comment on top of the test file:

/**
 * @jest-environment jsdom
 */

This will allow to run DOM related tests.